<template>
  <div>
    <header v-show="isNavbar" >
      <div class="navbar" >
        <NavBar/>
      </div>
      <div class="navbar_over"></div>
    </header>
    <main>
      <div>
        <slot></slot>
        <LoginForm v-model:is-open="isOpen"/>
        <GradientBackground/>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import NavBar from "@/ components/NavBar.vue";
import gsap from "gsap";
import LoginForm from "~/ components/login/LoginForm.vue";
import {useLoginStore} from "~/stores/pinia/useShowLogin";
import GradientBackground from "~/ components/background/GradientBackground.vue";
import { useRoute } from "vue-router";

const GSAP = gsap
const loginStore = useLoginStore()
const isOpen = ref(false)
const route = useRoute();
const isNavbar = ref(true)

const NavBorAdmission = async () => {
  const navbar = document.querySelector('.navbar')
  GSAP.fromTo(navbar,
      { y: -20, opacity: 0 },
      { y: 0, opacity: 1, duration: 0.3, ease: "power2" } // 缓动效果
  );
}


onMounted(async () => {
   await NavBorAdmission()
  // 监听 isOpen 的变化，同步更新 store 中的状态
  watch(() => loginStore.login, (newVal: any) => {
    isOpen.value = newVal
  })
  watch(() => isOpen.value, (newVal: boolean) => {
    loginStore.setLoginShow(newVal)
  })
  // watch(route, (to) => {
  //   isNavbar.value = to.path !== '/admin';
  // }, {flush: 'pre', immediate: true, deep: true})
})
</script>

<style scoped lang="scss">
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}
.navbar_over {
  height: 100px;
}

@media screen and (max-width: 240px) {
  .navbar,
  .navbar_over{
    opacity: 0;
    display: none;
    transition: all 0.5s ease-in-out;
  }
}

</style>